/* Copyright [2014] UW-Parkside
 * Authors: Jasmine Griffiths, Matthew Zygowicz, Armando Narvaez
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* kat.js
 * kat.js controls the population of forms, the ability to reset/clear a form,
 * and changing user passwords.
 * NOTE: There are duplicate functions with the number '2' appended to the
 * function name. These functions have the same functionality as the functions
 * without the '2', however they handle the edit box for the smaller
 * browser window. This is necessary because the same function cannot be used
 * to handle different forms, even if one form is hidden or not displayed.
 * For instance, if we have form1 available when the browser window is >1250px,
 * then form2 is hidden. The problem, however, is that the functions use
 * IDs to distinguish form elements, so we must write different functions to
 * handle different IDs (IDs cannot be used by more than one HTML element).
 *
 * We are aware that this method is clumsy and redundant, and welcome any
 * alternatives.
 */

/*
 * Populate the EDIT ROUTE form based on the row clicked in the table.
 * form[i] refers to the textbox fields of the form, and shall be populated
 * by information stored in the table.
 * This particular form references the form with the ID '#editRouteForm'.
 * NOTE: In this case we do not need populateForm2, and instead have placed
 * the second form for the smaller browser inside the function.
 * 
 * @id = route ID
 * @location = location of the route
 * @day = weekday or weekend
 * @time = military time of the stops
 * @direction = north, south, east, or west.
 */
function populateForm(id, location, day, time, direction) {
    var form = document.getElementById('editRouteForm');
    form[0].value = location;
    form[1].value = day;
    var hour;
    var minute;
    var time_of_day;
    //perform time operations
    if (time >= 1200) {
        time_of_day = 'pm';
        hour = time.substring(0,2);
        if (hour > 12) {
            hour -= 12;
        }
        minute = time.substring(2);
        
    }
    else{
        
        time_of_day = 'am';
        if (time >= 1000) {
            
            hour = time.substring(0,2);
            minute = time.substring(2);
        }
        else if (time >= 100 && time < 1000) {
            hour = time.substring(0,1);
            minute = time.substring(1);
        }
        else if (time >= 10 && time < 100) {
            hour = 12;
            minute = time;
        }
        else{
            hour = 12;
            minute = time;
        }
    }
    if (minute.substring(0,1) == '0') {
        minute = minute.substring(1);
    }
    $('#hourSelect').val(hour);
    $('#minuteSelect').val(minute);
    $('#ampmSelect').val(time_of_day);
    $('#id').val(id);
    $('#direction').val(direction);
    $('#submit').val('Edit Stop');
    form.firstElementChild.innerHTML = "<strong>Update/Edit Stop</strong>";
    if (!$("#Delete_Stop").length) {
        $('<input name = "submit" type="submit" id = "Delete_Stop" value="Delete Stop">').insertAfter('#submit');
        var s = $("#Delete_Stop");
        s.addClass("reducedSize right yellow button");
    }
    
    // Handles the form for the smaller browser window. Notice that the IDs
    // of the elements all have '2' after the name.
    var form2 = document.getElementById('editRouteForm2');
    form2[0].value = location;
    form2[1].value = day;
    
    
    form2.firstElementChild.innerHTML = "<strong>Update/Edit Stop</strong>";
    if (!$("#Delete_Stop2").length) {
        $('<input name = "submit" type="submit" id = "Delete_Stop2" value="Delete Stop">').insertAfter('#submit2');
        var s = $("#Delete_Stop2");
        s.addClass("reducedSize right yellow button");
    }
    
    $('#hourSelect2').val(hour);
    $('#minuteSelect2').val(minute);
    $('#direction2').val(direction);
    $('#ampmSelect2').val(time_of_day);
    $('#id2').val(id);
    $('#submit2').val('Edit Stop');
}

/*
 * Clear the textbox values of the editRouteForms.
 * This particular form references the form with the ID '#editRouteForm'.
 * NOTE: In this case we do not need resetForm2, and instead have placed
 * the second form for the smaller browser inside the function.
 */
function resetForm() {
    var form = document.getElementById('editRouteForm');
    form[0].value = '';
    form[1].value = '';
    form[2].value = '';
    form[3].value = '';
    form[4].value = '';
    $('#submit').val('Add Stop'); // Once everything is cleared, the user
    // should be able to add stops with their inputs.
    //form.firstElementChild.textContent = "Add Route";
    form.firstElementChild.innerHTML = "<strong>Add Stop</strong>";

    var form2 = document.getElementById('editRouteForm2');
    form2[0].value = '';
    form2[1].value = '';
    form2[2].value = '';
    form2[3].value = '';
    form2[4].value = '';
    $('#submit2').val('Add Stop'); // Once everything is cleared, the user
    // should be able to add stops with their inputs.
    //form.firstElementChild.textContent = "Add Route";
    form2.firstElementChild.innerHTML = "<strong>Add Stop</strong>";
}

/*
 * Populate the MANAGER USER form based on the row clicked in the table.
 * form[i] refers to the textbox fields of the form, and shall be populated
 * by information stored in the table.
 * 
 * @id = id of the user
 * @username = username of the user
 * @realm = user permission level
 */
function populateUserEntryForm(id, username, realm) {
    var form = document.getElementById('userEntryForm');
    var submitButton = document.getElementById('submitButton');

    form[0].value = username;
    form[1].placeholder = '*********'; //do not display the actual password
    form[2].placeholder = '*********';
    form[3].value = realm;
    form[4].value = id;

    // If the user clicks on a username from the table, do not allow them
    // to input information until they have selected "clear/reset form".
    $('#password').addClass("hidden"); // hide the previous input fields
    $('#confirmPassword').addClass("hidden");
    $('#deleteButton').removeClass("hidden");
    $('#passwordButton').removeClass("hidden");
    $('#resetButton').removeClass("hidden");
    submitButton.value = "Update User"; // user should be able to make updates

}
function populateUserEntryForm2(id, username, realm) {
    var form = document.getElementById('userEntryForm2');
    var submitButton = document.getElementById('submitButton2');

    form[0].value = username;
    form[1].placeholder = '*********';
    form[2].placeholder = '*********';
    form[3].value = realm;
    form[4].value = id;

    $('#password2').addClass("hidden");
    $('#confirmPassword2').addClass("hidden");
    $('#deleteButton2').removeClass("hidden");
    $('#passwordButton2').removeClass("hidden");
    $('#resetButton2').removeClass("hidden");
    submitButton.value = "Update User";
}

/*
 * CLEAR the values inside the user manager edit box.
 * form[i] refers to the textbox fields of the form, and shall be populated
 * by information stored in the table.
 */
function resetUserEntryForm() {
    var form = document.getElementById('userEntryForm');
    var username = document.getElementsByName('username');
   
    // clear form values
    form[0].value = '';
    form[1].value = '';
    form[2].value = '';
    form[3].value = '';

    $("username").attr("readonly", false); 
    form[3].readOnly = "false";

    // allow the user to enter information again
    $('#password').removeClass("hidden");
    $('#confirmPassword').removeClass("hidden");
    $('#deleteButton').addClass("hidden");
    $('#passwordButton').addClass("hidden");
    $('#resetButton').addClass("hidden");

    // allow the user to add a user based on that entered information
    submitButton.value = "Add User";
}

function resetUserEntryForm2() {
    var form = document.getElementById('userEntryForm2');
    var username = document.getElementsByName('username');  
    
    // clear form values
    form[0].value = '';
    form[1].value = '';
    form[2].value = '';
    form[3].value = '';

    $("username").attr("readonly", false); 
    //form[0].readOnly = "false";

    form[3].readOnly = "false";

    $('#password2').removeClass("hidden");
    $('#confirmPassword2').removeClass("hidden");
    $('#deleteButton2').addClass("hidden");
    $('#passwordButton2').addClass("hidden");
    $('#resetButton2').addClass("hidden");

    submitButton2.value = "Add User";


}
//FIXME Currently not functioning?
function changePassword() {
    var form = document.getElementById('userEntryForm');
    var submitButton = document.getElementById('submitButton');

    form[1].placeholder = '*********';
    form[2].placeholder = '*********';
    form[0].readOnly = "true";
    form[3].readOnly = "true";

    $('#deleteButton').addClass("hidden");
    $('#passwordButton').addClass("hidden");
    $('#password').removeClass("hidden");
    $('#confirmPassword').removeClass("hidden");

    submitButton.value = "Change Password";
    //    form[6].value = "Add User"; 

}

function changePassword2() {
    var form = document.getElementById('userEntryForm2');
    var submitButton = document.getElementById('submitButton2');

    form[1].placeholder = '*********';
    form[2].placeholder = '*********';
    form[0].readOnly = "true";
    form[3].readOnly = "true";

    $('#deleteButton2').addClass("hidden");
    $('#passwordButton2').addClass("hidden");
    $('#password2').removeClass("hidden");
    $('#confirmPassword2').removeClass("hidden");

    submitButton.value = "Change Password";
    //    form[6].value = "Add User"; 

}

/*
 * Populate the ADD ROUTE form based on the row clicked in the table.
 * form[i] refers to the textbox fields of the form, and shall be populated
 * by information stored in the table.
 * This particular form references the form with the ID '#addRouteForm'.
 * NOTE: In this case we do not need populateAddRouteForm2, and instead have
 * placed the second form for the smaller browser inside the function.
 * 
 * @id = route ID
 * @location = location of the route
 * @day = weekday or weekend
 * @time = military time of the stops
 * @direction = north, south, east, or west.
 */
function populateAddRouteForm(id, location, day, time, direction) {
    var form = document.getElementById('addRouteForm');
    form[1].value = location;
    form[2].value = day;
    form[3].value = time;
    form[4].value = id;
    form[5].value = direction;
    form[6].value = "Edit Stop";

    form.firstElementChild.innerHTML = "<strong>Update/Edit Stop</strong>";

    var form2 = document.getElementById('addRouteForm2');
    form2[1].value = location;
    form2[2].value = day;
    form2[3].value = time;
    form2[4].value = id;
    form2[5].value = direction;
    form2[6].value = "Edit Stop";

    form2.firstElementChild.innerHTML = "<strong>Update/Edit Stop</strong>";
}

/*
 * Reset the addRouteForm by clearing any of the information which may have
 * been populated when the user selected a row from the table.
 * This then allows the user to personally repopulate the form
 * and add a route or stop for the route currently being edited. * 
 */
function resetAddRouteForm() {
    var form = document.getElementById('addRouteForm');
    form[0].value = '';
    form[1].value = '';
    form[2].value = '';
    form[3].value = '';
    form[5].value = '';
    form[6].value = "Add Stop";
    form.firstElementChild.innerHTML = "<strong>Add Stop for New Route</strong>";

    var form2 = document.getElementById('addRouteForm2');
    form2[0].value = '';
    form2[1].value = '';
    form2[2].value = '';
    form2[3].value = '';
    form2[5].value = '';
    form2[6].value = "Add Stop";
    form2.firstElementChild.innerHTML = "<strong>Add Stop for New Route</strong>";
}

function removeField(id) {    
    document.getElementById('routenumber').style.display = 'block';    
}

// Delete the route if the user confirms the alert box by triggering the
// submission of the hidden button
function triggerDelete() {
    var response = confirm("Are you sure you want to delete?");
    if (response) {
        $("#delete").trigger( "click" ); 
    }
}
// Delete the route if user verifies deletion
function verify() {
        var url = "/index.php/kat/droproute/";
        window.open(url, "_self");
    
}